﻿<style>
    body.home {
        font-family: "Helvetica Neue", Helvetica, Arial, Microsoft Yahei, Hei, sans-serif;
        font-size: 14px;
        line-height: 1.42857143;
        color: #2d2d2d;
        background-color: #f2f2f2;
        background-image: none;
        overflow-y: auto;
    }

        body.home .btn.active.focus, body.home .btn.active:focus, body.home .btn.focus, body.home .btn:active.focus, body.home .btn:active:focus, body.home .btn:focus {
            outline: none;
        }

        body.home.modal-open {
            overflow: hidden;
            padding-right: 0 !important;
        }

            body.home.modal-open .modal {
                overflow: hidden;
                padding-right: 0 !important;
            }

        body.home .modal:before {
            display: none;
        }

        body.home .modal.fade:not(.in) .modal-dialog {
            transform: translate3d(25%, 0, 0);
        }

        body.home .modal-dialog .modal-content {
            box-shadow: none !important;
            box-shadow: none !important;
            border: none;
            border-radius: 0;
        }

            body.home .modal-dialog .modal-content .modal-header {
                border: none;
                background: #D04A02;
            }

                body.home .modal-dialog .modal-content .modal-header svg {
                    position: absolute;
                    right: 15px;
                    top: 20px;
                }

                body.home .modal-dialog .modal-content .modal-header .modal-title {
                    font-family: Georgia, serif;
                    font-size: 28px;
                    font-weight: 400;
                    line-height: 1;
                    margin-top: 5px;
                    margin-bottom: 5px;
                    color: #fff;
                }

                    body.home .modal-dialog .modal-content .modal-header .modal-title span.results {
                        margin-left: 10px;
                        border: 1px solid #fff;
                        padding: 0 5px;
                        border-radius: 10px;
                        font-size: 18px;
                        font-family: Arial, sans-serif;
                    }

            body.home .modal-dialog .modal-content .modal-body {
                height: calc(100vh - 68px);
                padding: 0;
                overflow: hidden;
            }

                body.home .modal-dialog .modal-content .modal-body .content-container .list .item {
                    border: none;
                    border-bottom: 1px solid #dedede;
                    margin-bottom: 0;
                }

        body.home .h1, body.home .h2, body.home .h3, body.home .h4, body.home .h5, body.home .h6, body.home h1, body.home h2, body.home h3, body.home h4, body.home h5, body.home h6 {
            color: #2d2d2d;
        }

        body.home #container, body.home #content-container {
            min-height: calc(100vh - 28px);
        }

    #container #content-container .dashboard-container {
        position: relative;
    }

        #container #content-container .dashboard-container .dashboard-header {
            position: absolute;
            right: 0;
            top: 10px;
            z-index: 1;
        }

            #container #content-container .dashboard-container .dashboard-header .btn.btn-new {
                border: none;
                background-color: #D93954;
                color: #FFF;
                font-weight: bold;
                padding: 0;
                font-size: 20px;
                line-height: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 27px 0 0 27px;
                margin: 0;
                height: 54px;
                width: 140px;
            }

                #container #content-container .dashboard-container .dashboard-header .btn.btn-new:hover {
                    border-color: #b93147;
                    background-color: #b93147;
                }

            #container #content-container .dashboard-container .dashboard-header .dropdown-menu {
                font-size: 16px;
                border: none;
                background: #D93954;
                border-radius: 0;
                box-shadow: none;
                padding: 0;
                margin: 0;
            }

                #container #content-container .dashboard-container .dashboard-header .dropdown-menu > li > a {
                    padding: 10px 20px;
                    color: #fff;
                }

                    #container #content-container .dashboard-container .dashboard-header .dropdown-menu > li > a:hover {
                        background-color: #b93147;
                        color: #fff;
                    }

        #container #content-container .dashboard-container .dashboard {
            width: 100%;
            max-width: 1800px;
        }

            #container #content-container .dashboard-container .dashboard .section-two .no-data {
                border: 2px dashed #dedede;
                margin: 0 15px;
                background: #fff;
            }

    .loading {
        margin: 15px;
        text-align: center;
    }

        .loading img {
            width: 40px;
            height: 40px;
        }

    .flex-row {
        display: flex;
        flex-wrap: wrap;
    }

        .flex-row [class^=flex-col-], .flex-row .section-one, .flex-row .section-two, .flex-row .column-one, .flex-row .column-two {
            position: relative;
            width: 100%;
        }

    @media (min-width: 992px) {
        #container #content-container .dashboard-container .dashboard .flex-row {
            min-height: calc(100vh - 195px);
        }

        #container #content-container .dashboard-container .dashboard .content-container.to-do-list {
            min-height: 100%;
            position: relative;
        }

            #container #content-container .dashboard-container .dashboard .content-container.to-do-list .img-responsive {
                position: absolute;
                bottom: 0;
            }

            #container #content-container .dashboard-container .dashboard .content-container.to-do-list .no-data {
                margin-top: 90px;
            }

                #container #content-container .dashboard-container .dashboard .content-container.to-do-list .no-data > .img-responsive {
                    position: absolute;
                    bottom: 0;
                }

        #container #content-container .dashboard-container .dashboard .section-one {
            flex: 0 0 25%;
            max-width: 25%;
            background-color: #fff;
            border-right: 1px solid #dedede;
        }

            #container #content-container .dashboard-container .dashboard .section-one .list .item {
                border-color: #fff;
                margin-bottom: 0;
            }

            #container #content-container .dashboard-container .dashboard .section-one .content-container .list {
                margin: 0;
            }

        #container #content-container .dashboard-container .dashboard .section-two {
            flex: 0 0 75%;
            max-width: 75%;
        }

            #container #content-container .dashboard-container .dashboard .section-two .content-container.my-checkout-content {
                max-width: 550px;
                margin: 0 auto;
            }

        .column-one {
            flex: 0 0 50%;
            max-width: 50%;
        }

        .column-two {
            flex: 0 0 50%;
            max-width: 50%;
        }

        .modal-dialog {
            width: 100%;
            margin: 0 0 0 auto;
            max-width: 780px;
            display: block;
        }

        .img-dashboard {
            margin-top: -306px;
        }
    }

    .all-displayed-divider {
        color: #969696;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        display: table;
        white-space: nowrap;
        height: auto;
        font-size: 12px;
        line-height: 1;
        text-align: center;
        max-width: 245px;
        width: 100%;
        margin: 15px auto;
    }

        .all-displayed-divider:after, .all-displayed-divider:before {
            content: '';
            display: table-cell;
            position: relative;
            top: 50%;
            width: 50%;
            background-repeat: no-repeat;
            background-image: url();
        }

        .all-displayed-divider:before {
            background-position: right 15px top 50%;
        }

        .all-displayed-divider:after {
            background-position: left 15px top 50%;
        }

    .no-data .content {
        padding: 20px 30px;
    }

        .no-data .content h6 {
            font-size: 16px;
            line-height: 18px;
            color: #2d2d2d;
            font-weight: normal;
        }

        .no-data .content p {
            color: #7d7d7d;
        }

            .no-data .content p svg {
                width: 18px;
                height: 18px;
                vertical-align: middle;
            }

        .no-data .content a, .no-data .content a:hover {
            color: #D04A02;
            text-decoration: underline;
        }

    .content-container {
        background-color: transparent;
        padding: 0;
        margin: 0;
        height: auto;
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

        .content-container h4 {
            font-size: 20px;
            line-height: 24px;
            font-weight: normal;
            background: transparent;
            color: #2d2d2d;
            margin: 0;
            padding: 20px 15px;
            font-family: "Helvetica Neue", Helvetica, Arial, Microsoft Yahei, Hei, sans-serif;
            display: flex;
        }

            .content-container h4 span.results {
                margin-left: 10px;
                padding: 0 10px;
                border-radius: 12px;
                font-size: 14px;
                font-family: "Helvetica Neue", Helvetica, Arial, Microsoft Yahei, Hei, sans-serif;
                background-color: #D04A02;
                color: #fff;
                min-width: 48px;
                display: inline-block;
                text-align: center;
            }

        .content-container .list {
            margin: 0 15px;
            padding: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, Microsoft Yahei, Hei, sans-serif;
            font-size: 14px;
            line-height: 16px;
            color: #7d7d7d;
        }

            .content-container .list .item {
                display: flex;
                padding: 10px 15px;
                border: 1px solid #dedede;
                color: #7d7d7d;
                background: #fff;
                margin-bottom: 5px;
                transition: 0.3s;
            }

                .content-container .list .item:hover {
                    text-decoration: none;
                    background-color: #FFECBD;
                    border-color: #FFECBD;
                }

            .content-container .list .image {
                width: 40px;
                height: 40px;
                background-position: top center;
                background-repeat: no-repeat;
                background-size: cover;
                background-color: #DEDEDE;
                border-radius: 50%;
                margin-right: 10px;
            }

            .content-container .list .file-image {
                width: 30px;
                min-width: 30px;
                height: 30px;
                background-position: center;
                background-color: transparent;
                background-size: cover;
                border-radius: 0;
                display: inline-block;
                background-repeat: no-repeat;
                margin-right: 10px;
                margin-top: 4px;
            }

            .content-container .list .file-name {
                display: flex;
                align-items: center;
            }

                .content-container .list .file-name .file-image + div {
                    white-space: normal;
                    line-height: 16px;
                    font-weight: bold;
                }

            .content-container .list .content {
                flex: 1;
                max-width: calc(100% - 55px);
            }

                .content-container .list .content .item-footer {
                    display: flex;
                    justify-content: space-between;
                }

                .content-container .list .content .item-header {
                    color: #2d2d2d;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 16px;
                    line-height: 20px;
                    margin-bottom: 5px;
                }

                .content-container .list .content .header {
                    margin-bottom: 5px;
                }

                    .content-container .list .content .header > span:first-of-type {
                        font-weight: 700;
                        color: #2d2d2d;
                        padding-right: 10px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

        .content-container .list-footer {
            text-align: center;
            margin: 15px 0;
        }

            .content-container .list-footer .btn.btn-showall {
                border-radius: 0;
                border-color: #D04A02;
                background-color: transparent;
                color: #D04A02;
                padding: 6px 30px;
            }

                .content-container .list-footer .btn.btn-showall:hover {
                    border-color: #D04A02;
                    background-color: #D04A02;
                    color: #fff;
                }

        .content-container.my-favourite .list {
            display: flex;
            flex-wrap: wrap;
            margin: 0 5px;
        }

            .content-container.my-favourite .list .content {
                flex: 1;
                max-width: 100%;
                min-height: 25px;
            }

                .content-container.my-favourite .list .content .item-header {
                    margin-top: 5px;
                    font-size: 14px;
                }

        .content-container.my-favourite .list-footer {
            margin-top: 0;
        }

        .content-container.my-favourite .item {
            flex: 0 0 25%;
            max-width: 25%;
            padding: 0 10px;
            margin-bottom: 10px;
            background-color: #f2f2f2;
            border: none;
            flex-direction: column;
            transition: 0.3s;
        }

            .content-container.my-favourite .item .file-image-wrapper {
                border: 1px solid #dedede;
                background-color: #fff;
                line-height: 0;
                text-align: center;
            }

                .content-container.my-favourite .item .file-image-wrapper .file-image {
                    width: 50%;
                    min-width: 50%;
                    height: 50%;
                    margin-right: 0;
                    background-size: 100%;
                    padding-bottom: 100%;
                    background-color: transparent;
                }

            .content-container.my-favourite .item:hover {
                background-color: #f2f2f2;
            }

                .content-container.my-favourite .item:hover .file-image-wrapper {
                    background-color: #FFECBD;
                    border-color: #FFECBD;
                }
</style>
<div ng-app="myApp" ng-controller="appController">
    <div class="dashboard-container">
        <div class="dashboard-header">
            <div class="dropdown">
                <button class="btn btn-new" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="true">
                    <svg style="width:40px;height:40px;margin-right:5px;" viewBox="0 0 24 24">
                        <path fill="#FFFFFF" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
                    </svg>
                    <span>New</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu" style="background-color:#FFC107;">
                    <li ng-repeat="item in documentTemplateList">
                        <a href="/dlcmstestdrive/dlcmsvopo/vForm/OGCDocument/Add?DocumentType={{item.Code}}" target="_blank">{{item.Name}}</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="dashboard">
            <div class="flex-row">
                <div class="section-one">
                    <div class="content-container to-do-list">
                        <h4>To do list<span class="results" ng-show="!todoLoading">{{todoTotal}}</span></h4>
                        <div class="list" ng-show="!todoLoading&&todoTotal>0">
                            <a class="item" href="/dlcmstestdrive/dlcmsvopo/vForm/OGCDocument/Edit/{{o._id}}/"
                               target="_blank" ng-repeat="o in todoList">
                                <div class="image" style="background-image: url({{o.userIcon}});">
                                </div>
                                <div class="content">
                                    <div class="item-header">
                                        <span>{{o.CreateBy}} submitted  content for your review</span>
                                        <span ng-hide="true">Your content will be expired in {{o.ExpirationDays}} days</span>
                                    </div>
                                    <div class="item-footer">
                                        <span>{{o.Title}}.{{o.DocumentType}}</span>
                                        <span>{{o.C4_CreateDate}}</span>
                                    </div>
                                </div>
                            </a>
                            <img src="/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=77fbeab0-927d-47c1-82c6-7d8a865dfd51"
                                 class="img-responsive" alt="">
                        </div>
                        <div class="loading" ng-show="todoLoading">
                            <img src="/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=68c974b8-b91b-4cdc-821b-363e4a576bd4">
                        </div>
                        <div class="no-data" ng-show="todoTotal==0">
                            <div class="content">
                                <h6>Your to-do list will show up here</h6>
                                <p>
                                    If you want to make changes to a content and you want to make sure no one else can
                                    edit
                                    it, check
                                    out the content. When you finish editing and check in the content into the system,
                                    other
                                    people
                                    can
                                    see your changes and edit the content, if they have permission.
                                </p>
                            </div>
                            <img src="/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=77fbeab0-927d-47c1-82c6-7d8a865dfd51"
                                 class="img-responsive" alt="">
                        </div>
                        <div class="list-footer" ng-show="todoTotal>10">
                            <a href="#" class="btn btn-showall" ng-click="showMore('todo')">Show all</a>
                        </div>
                    </div>
                </div>
                <div class="section-two">
                    <div class="flex-row">
                        <div class="column-one">
                            <div class="content-container my-checkout-content">
                                <h4>
                                    My checkout content<span class="results"
                                                             ng-show="!checkoutLoading">{{checkouTotal}}</span>
                                </h4>
                                <div class="list" ng-show="!checkoutLoading&&checkouTotal>0">
                                    <a class="item" target="_blank"
                                       href="/dlcmstestdrive/dlcmsvopo/vForm/OGCDocument/Edit/{{o._id}}/"
                                       ng-repeat="o in checkoutList">
                                        <div class="file-image" style="background-image: url({{o.documentIcon}});">
                                        </div>
                                        <div class="content">
                                            <div class="item-header">{{o.C4_CreateBy}}</div>
                                            <div class="item-footer">
                                                <span>{{o.Title}}.{{o.DocumentType}}</span>
                                                <span>{{o.C4_CreateDate}}</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="loading" ng-show="checkoutLoading">
                                    <img src="/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=68c974b8-b91b-4cdc-821b-363e4a576bd4">
                                </div>
                                <div class="no-data" ng-show="checkouTotal==0">
                                    <div class="content">
                                        <img src="/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=fd18bbfa-9157-41ef-a683-8f617579f289">
                                        <h6>The content you’ve checked out will list here</h6>
                                        <p>
                                            If you want to make changes to a content and you want to make sure no one
                                            else
                                            can edit it, check out the content. When you finish editing and check in the
                                            content into the system, other people can see your changes and edit the
                                            content,
                                            if they have permission.
                                        </p>
                                    </div>
                                </div>
                                <div class="list-footer" ng-show="checkouTotal>10">
                                    <a href="#" class="btn btn-showall" ng-click="showMore('checkout')">Show all</a>
                                </div>
                            </div>
                        </div>
                        <div class="column-two">
                            <div class="content-container my-favourite ng-hide">
                                <h4>
                                    My favourite<span class="results"
                                                      ng-show="!favouriteLoading">{{favoriteTotal}}</span>
                                </h4>
                                <div class="list" ng-show="!favouriteLoading&&favoriteTotal>0">
                                    <a class="item" target="_blank"
                                       href="/dlcmstestdrive/dlcmsvopo/vForm/OGCDocument/Preview/{{o._id}}/"
                                       ng-repeat="o in favoriteList">
                                        <div class="file-image-wrapper">
                                            <div class="file-image" style="background-image: url({{o.documentIcon}});">
                                            </div>
                                        </div>
                                        <div class="content">
                                            <div class="item-header">{{o.Title}}.{{o.DocumentType}}</div>
                                        </div>
                                    </a>
                                </div>
                                <div class="loading" ng-show="favouriteLoading">
                                    <img src="/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=68c974b8-b91b-4cdc-821b-363e4a576bd4">
                                </div>
                                <div class="no-data" ng-show="favoriteTotal==0">
                                    <div class="content">
                                        <img src="/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=21d91e14-0752-4b5e-83fe-27358927bbf1">
                                        <h6>Your favourite content will list here</h6>
                                        <p>
                                            If you want to save a content and view it later, you can add it to your
                                            favorites
                                            and revisit it later. To save the content to favourite, click the <svg viewBox="0 0 24 24">
                                                <path fill="#7D7D7D"
                                                      d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z">
                                                </path>
                                            </svg>button on the content info panel on right side.
                                        </p>
                                    </div>
                                </div>
                                <div class="list-footer" ng-show="favoriteTotal>8">
                                    <a href="#" class="btn btn-showall" ng-click="showMore('favourite')">Show all</a>
                                </div>

                            </div>
                            <div class="content-container latest-upload">
                                <h4>
                                    Latest upload <span class="results" ng-show="!latestLoading">{{latestTotal}}</span>
                                </h4>
                                <div class="list" ng-show="!latestLoading&&latestTotal>0">
                                    <a class="item" target="_blank"
                                       href="/dlcmstestdrive/dlcmsvopo/vForm/OGCDocument/Preview/{{o._id}}/"
                                       ng-repeat="o in latestList">
                                        <div class="file-image" style="background-image: url({{o.documentIcon}});">
                                        </div>
                                        <div class="content">
                                            <div class="item-header">{{o.Title}}.{{o.DocumentType}}</div>
                                            <div class="item-footer">
                                                <span>{{o.C4_CreateBy}}</span>
                                                <span>{{o.C4_CreateDate}}</span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="loading" ng-show="latestLoading">
                                    <img src="/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=68c974b8-b91b-4cdc-821b-363e4a576bd4">
                                </div>
                                <div class="no-data" ng-show="latestTotal==0">
                                    <div class="content">
                                        <img src="/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=8ed414ce-fbf8-4190-a15f-a2b5800f99c5">
                                        <h6>The latest content you’ve uploaded will list here</h6>
                                        <p>
                                            Upload your very first content by clicking the New button on top right
                                            corner.
                                        </p>
                                    </div>
                                </div>
                                <div class="list-footer" ng-show="latestTotal>10">
                                    <a href="#" class="btn btn-showall" ng-click="showMore('latest')">Show all</a>
                                </div>

                            </div>
                        </div>
                    </div>
                    <img src="/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=7cf94f70-6b1b-4ed0-80a6-44d49fc59a6d"
                         class="img-responsive img-dashboard" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade animated" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">
                        {{titleName}} <span class="results"
                                            ng-show="ListMore.length>0">{{ListMore.length}}of{{listTotal}}</span>
                    </h4>
                    <svg style="width:28px;height:28px;cursor:pointer;" viewBox="0 0 24 24" data-dismiss="modal"
                         aria-label="Close">
                        <path fill="#FFF"
                              d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
                    </svg>
                </div>
                <div class="modal-body">
                    <div class="content-container">

                        <div class="list" ng-show="bigType=='todo'">
                            <a class="item" href="/dlcmstestdrive/dlcmsvopo/vForm/OGCDocument/Preview/{{o._id}}/"
                               target="_blank" ng-repeat="o in ListMore">
                                <div class="image" style="background-image: url({{o.userIcon}});">
                                </div>
                                <div class="content">
                                    <div class="item-header">
                                        <span>{{o.CreateBy}} submitted  content for your review</span>
                                        <span ng-hide="true">Your content will be expired in {{o.ExpirationDays}} days</span>
                                    </div>
                                    <div class="item-footer">
                                        <span>{{o.Title}}.{{o.DocumentType}}</span>
                                        <span>{{o.C4_CreateDate}}</span>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="list" ng-show="bigType=='checkout'">
                            <div class="list">
                                <a class="item" target="_blank"
                                   href="/dlcmstestdrive/dlcmsvopo/vForm/OGCDocument/Edit/{{o._id}}/"
                                   ng-repeat="o in ListMore">
                                    <div class="file-image" style="background-image: url({{o.documentIcon}});">
                                    </div>
                                    <div class="content">
                                        <div class="item-header">{{o.Title}}.{{o.DocumentType}}</div>
                                        <div class="item-footer">
                                            <span>{{o.C4_CreateBy}}</span>
                                            <span>{{o.C4_CreateDate}}</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>

                        <div class="list" ng-show="bigType=='favourite'">
                            <a class="item" target="_blank"
                               href="/dlcmstestdrive/dlcmsvopo/vForm/OGCDocument/Preview/{{o._id}}/"
                               ng-repeat="o in ListMore">
                                <div class="file-image" style="background-image: url({{o.documentIcon}});"></div>
                                <div class="content">
                                    <div class="item-header">{{o.Title}}.{{o.DocumentType}}</div>
                                    <div class="item-footer">
                                        <span>{{o.C4_CreateBy}}</span>
                                        <span>{{o.C4_CreateDate}}</span>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="list" ng-show="bigType=='latest'">
                            <a class="item" target="_blank"
                               href="/dlcmstestdrive/dlcmsvopo/vForm/OGCDocument/Preview/{{o._id}}/"
                               ng-repeat="o in ListMore">
                                <div class="file-image" style="background-image: url({{o.documentIcon}});"></div>
                                <div class="content">
                                    <div class="item-header">{{o.Title}}.{{o.DocumentType}}</div>
                                    <div class="item-footer">
                                        <span>{{o.C4_CreateBy}}</span>
                                        <span>{{o.C4_CreateDate}}</span>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="loading" ng-show="busy==1">
                            <img src="/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=68c974b8-b91b-4cdc-821b-363e4a576bd4" />
                        </div>
                        <div class="list-footer">
                            <a href="#" class="btn btn-showall" ng-hide="busy==1||busy==2||bigType!='favourite'"
                               ng-click="GetMyfavorite('more')">Show more</a>
                            <a href="#" class="btn btn-showall" ng-hide="busy==1||busy==2||bigType!='todo'"
                               ng-click="GetToDoList('more')">Show more</a>
                            <a href="#" class="btn btn-showall" ng-hide="busy==1||busy==2||bigType!='checkout'"
                               ng-click="GetMyCheckOut('more')">Show more</a>
                            <a href="#" class="btn btn-showall" ng-hide="busy==1||busy==2||bigType!='latest'"
                               ng-click="GetLatestList('more')">Show more</a>
                        </div>
                        <div class="all-displayed-divider" ng-show="busy==2">All items displayed</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>

    function myReplace(str, f, e) {
        var reg = new RegExp(f, "g");
        return str.replace(reg, e);
    }

    function GetDocumentIcon(type) {
        var url = "";
        switch (type.toLowerCase()) {
            case "bmp":
                url = "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=bb591462-9d2a-44ff-b58d-bab1e6fd3c83";
                break;
            case "doc":
                url = "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=5954f2ee-2c3e-4cb3-ab05-9b59461bb323";
                break;
            case "docx":
                url = "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=9de7fc8f-599b-456e-a1ee-09331e5aea7e";
                break;
            case "gif":
                url = "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=ee9fe9ab-5c52-41bb-b3b1-221f406fca7d";
                break;
            case "jpeg":
                url = "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=cb89120b-807d-42f0-9ffa-5472fddd37d3";
                break;
            case "jpg":
                url = "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=44ed9543-a135-4a6f-9439-be076d04e04d";
                break;
            case "pdf":
                url = "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=af0cccd0-74ae-461c-8611-70dd86bfcbad";
                break;
            case "ppt":
                url = "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=08edccde-1d38-434e-94dd-b54f220389ef";
                break;
            case "pptx":
                url = "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=0e7510e4-8be1-4fad-b40c-db7b45cc16a9";
                break;
            case "psd":
                url = "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=cb8f8552-27a9-45c5-aadf-01ab021391e6";
                break;
            case "tif":
                url = "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=d5c2b724-680c-4bbc-80f2-06b9abc29fe1";
                break;
            case "tiff":
                url = "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=35f5697f-ba7b-4879-8f20-4e60da1bd8d9";
                break;
            case "vsd":
                url = "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=5586e19a-8c7c-47bd-9c5a-564bca7087ff";
                break;
            case "vsdx":
                url = "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=48da3443-c7a1-4a23-b3ed-f9acdc9fe34c";
                break;
            case "xls":
                url = "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=fa5f1606-502c-4c3a-ba5b-a7dc84d572dd";
                break;
            case "xlsx":
                url = "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=c814f15f-270a-4aa4-aeb5-166d1bee80fc";
                break;
            default:
                url = "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=af0cccd0-74ae-461c-8611-70dd86bfcbad";
                break;

        }
        return url;
    }

    function getuserIcon(userid) {
        return "/FrontEnd/images/profile-default.jpg";
        return "/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=5aefacb3-f4e8-463c-8708-8c4e340d60e9";
    }
</script>
<script src="/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=f83eed34-6d8a-4437-af54-16639fae185f"></script>
<script src="/dlcmstestdrive/dlcmsvopo/Admin/HomePage/DownloadFile?fileIds=7f5e9b80-b95d-4c81-bfcb-864c934c067c"></script>
<script>
    var currentUser = CustomCodeResultData.CurrentUser.UserInfo;
    var StaffCode = currentUser.StaffCode;
    var UserID = currentUser.UserID;

    var app = angular.module('myApp', []);
    app.controller('appController', function ($scope, $http) {
        $scope.busy = 0;

        $scope.dotList = function (list) {
            var newList = [];
            angular.forEach(list, function (o) {
                var k = {
                    "Title": o.Title,
                    "DocumentType": o.DocumentType,
                    "Tag": o.Tag,
                    "C4_CreateBy": o["C4-CreateBy"],
                    "C4_CreateDate": moment(o["C4-CreateDate"]).format("DD MMM YYYY"),
                    "_id": o._id,
                    "documentIcon": GetDocumentIcon(o.DocumentType),
                    "userIcon": getuserIcon(o["C4-CreateById"]),
                    "ExpirationDays": o.ExpirationDays,
                    "CreateBy": o["Metadata-DocumentOwner_relationsvalue"][0].StaffName,
                };
                newList.push(k);
            });
            return newList;
        };



        $scope.openlink = function (o) {
            var url = "/dlcmstestdrive/dlcmsvopo/vForm/OGCDocument/Preview/" + o._id + "/";
            window.open(url);
        };


        $scope.pageSize = 20;
        $scope.favoriteList = [];
        $scope.todoList = [];
        $scope.checkoutList = [];
        $scope.latestList = [];
        $scope.favoriteTotal = 0;
        $scope.todoTotal = 0;
        $scope.checkouTotal = 0;
        $scope.latestTotal = 0;
        $scope.listTotal = 0;

        $scope.todoLoading = true;
        $scope.favouriteLoading = true;
        $scope.checkoutLoading = true;
        $scope.latestLoading = true;

        $scope.ListMore = [];
        $scope.bigType = "";
        $scope.pageIndex = 0;
        $scope.GetDatas = function (bigType, type, searchItem) {
            $scope.busy = 1;
            var defaultSize = 10;
            if (bigType == 'todo') {
                defaultSize = 10;
            }
            if (bigType == 'checkout') {
                defaultSize = 10;
            }
            if (bigType == 'favourite') {
                defaultSize = 8;
            }

            if (bigType == 'todo' && type == '') {
                $scope.todoLoading = true;
            } else if (bigType == "favourite" && type == '') {
                $scope.favouriteLoading = true;
            } else if (bigType == "checkout" && type == '') {
                $scope.checkoutLoading = true;
            } else if (bigType == "latest" && type == '') {
                $scope.latestLoading = true;
            }

            if (type == 'more') {
                $scope.pageIndex += 1;
            } else {
                $scope.pageIndex = 0;
            }
            var requrl = "/dlcmstestdrive/dlcmsvopo/CustomApi/RetrieveQueryDocs";
            var Jsondata = {};
            Jsondata.Token = "";
            Jsondata.EntityName = "ac15ffa8-b5bb-4f90-b158-50c82096b488";
            Jsondata.size = type == '' ? defaultSize : $scope.pageSize;
            Jsondata.index = $scope.pageIndex * Jsondata.size;
            Jsondata.SearchItem = searchItem;
            Jsondata.Order = { "C4-ModifyDate": "Descending" };
            console.log(bigType,JSON.stringify(Jsondata));
            $http.post(requrl, Jsondata).success(function (response) {
                var resultList = $scope.dotList(response.Data.rows);
                if (type == '') {
                    if (bigType == 'favourite') {
                        $scope.favoriteList = resultList;
                        $scope.favoriteTotal = response.Data.total;
                        $scope.favouriteLoading = false;
                    } else if (bigType == 'todo') {
                        $scope.todoList = resultList;
                        console.log(resultList);
                        $scope.todoTotal = response.Data.total;
                        $scope.todoLoading = false;
                    } else if (bigType == 'checkout') {
                        $scope.checkoutList = resultList;
                        $scope.checkouTotal = response.Data.total;
                        $scope.checkoutLoading = false;
                    } else if (bigType == 'latest') {
                        $scope.latestList = resultList;
                        $scope.latestTotal = response.Data.total;
                        $scope.latestLoading = false;
                    }
                } else if (type == 'show') {
                    $scope.ListMore = resultList;
                } else if (type == 'more') {
                    angular.forEach(resultList, function (o) {
                        $scope.ListMore.push(o);
                    });
                }
                if (type != '') {
                    $scope.listTotal = response.Data.total;
                    $scope.bigType = bigType;
                    $scope.busy = resultList.length < $scope.pageSize ? 2 : 0;
                }
            });
        };

        $scope.GetMyfavorite = function (type) {
            var searchItem = [];
            searchItem.push({
                Method: "And",
                Operator: "Equal",
                Name: "C4-FavouriteStaff.StaffId",
                Value: UserID
            });
            $scope.GetDatas('favourite', type, searchItem);
        };
        $scope.GetMyCheckOut = function (type) {
            var searchItem = [];
            searchItem.push({
                Method: "And",
                Operator: "Equal",
                Name: "CheckCreatorId",
                Value: StaffCode
            });
            searchItem.push({
                Method: "And",
                Operator: "Equal",
                Name: "CheckStatus",
                Value: "Checked Out"
            });
            $scope.GetDatas('checkout', type, searchItem);
        };

        $scope.GetToDoList = function (type) {
            var time = moment().add(7, 'days');
            var k = time.valueOf();
            var k2 = moment().valueOf();
            var searchItem = [];
            var resultSearchItem = [];
            searchItem.push({
                Method: "And",
                Operator: "Equal",
                Name: "C4-CreateById",
                Value: StaffCode
            });
            searchItem.push({
                Method: "And",
                Operator: "<=",
                Name: "ExpirationDays",
                Value: 31
            });
            searchItem.push({
                Method: "And",
                Operator: ">=",
                Name: "ExpirationDays",
                Value: -100
            });

            resultSearchItem.push({ Method: "Or", SubSearchItem: searchItem });

            var searchItem2 = [];
            searchItem2.push({
                Method: "And",
                Operator: "Equal",
                Name: "C4-CurrentWorkflowUser",
                Value: StaffCode
            });

            searchItem2.push({
                Method: "And",
                Operator: "NotEqual",
                Name: "C4-WorkflowStateDisplayName",
                Value: "Draft"
            });
            searchItem2.push({
                Method: "And",
                Operator: "NotEqual",
                Name: "C4-WorkflowStateDisplayName",
                Value: "Draft"
            });
            searchItem2.push({
                Method: "And",
                Operator: "NotEqual",
                Name: "C4-WorkflowStateDisplayName",
                Value: "Approved"
            });
            $scope.GetDatas('todo', type, searchItem2);
        };






        $scope.GetLatestList = function (type) {
            var searchItem = [];
            searchItem.push({
                Method: "Or",
                Operator: "Equal",
                Name: "C4-RestrictedEditor",
                Value: StaffCode
            });
            searchItem.push({
                Method: "Or",
                Operator: "Equal",
                Name: "C4-RestrictedReader",
                Value: StaffCode
            });
            searchItem.push({
                Method: "Or",
                Operator: "Equal",
                Name: "C4-CreateById",
                Value: StaffCode
            });
            searchItem.push({
                Method: "Or",
                Operator: "Equal",
                Name: "RestrictionType",
                Value: "No"
            });
          searchItem.push({
                Method: "Or",
                Operator: "Equal",
                Name: "DocumentOwner",
                Value: StaffCode
            });



            $scope.GetDatas('latest', type, searchItem);
        };
        $scope.GetMyfavorite('');
        $scope.GetMyCheckOut('');
        $scope.GetToDoList('');
        $scope.GetLatestList('');




        $scope.documentTemplateList = [];
        $scope.GetDocumentTemplate = function () {
            var requrl = "/dlcmstestdrive/dlcmsvopo/CustomApi/RetrieveQueryDocs";
            var Jsondata = {};
            Jsondata.Token = "";
            Jsondata.EntityName = "7071c8f6-7c07-48ca-877c-a9a65f2f484f";
            Jsondata.size = 1000;
            Jsondata.index = 0;
            Jsondata.SearchItem = [];
            Jsondata.Order = { "C4-ModifyDate": "Descending" };
            $http.post(requrl, Jsondata).success(function (response) {
                $scope.documentTemplateList = response.Data.rows;
            });
        };
        $scope.GetDocumentTemplate();


        $scope.titleName = '';
        $scope.showMore = function (type) {
            $scope.ListMore = [];
            if (type == 'todo') {
                $scope.titleName = "To do list";
                $scope.GetToDoList('show');
            } else if (type == 'checkout') {
                $scope.titleName = "My checkout content";
                $scope.GetMyCheckOut('show');
            } else if (type == 'favourite') {
                $scope.titleName = "My favourite";
                $scope.GetMyfavorite('show');
            } else if (type == 'latest') {
                $scope.titleName = "Latest upload";
                $scope.GetLatestList('show');
            }
            $('#myModal').modal();
        }


    });
</script>
<script>
    var currentUser = CustomCodeResultData.CurrentUser.UserInfo;
    var StaffCode = currentUser.StaffCode;
    var UserID = currentUser.UserID;
    console.log("StaffCode", StaffCode);
    console.log("UserID", UserID);

    function GetUserInfo() {
        var req = "/dlcmstestdrive/dlcmsvopo/CustomApi/GetUserInfo";
        var Jsondata = {};
        Jsondata.Token = "";
        Jsondata.userID = "25707707-ab4a-45e5-b298-19f8d44408bd";
        $.post(req, Jsondata, function (response) {
            console.log("GetUserInfo:", response);
        });
    }
    GetUserInfo();
    $(function () {
        setTimeout(function () {
            $("#8b57a976-bb41-46a1-89f1-0bbc1b59ce1f").hide();
            //$(".search-form").html("<a target='_blank' href='/dlcmstestdrive/dlcmsvopo/PagePreview/mySearch'>Search</a>").show();
        }, 2000);
    })



</script>                                